<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点灯游戏</title>
		<style type="text/css">
			#tab{
				width: 400px;
				height: 400px;
				margin: 0px auto;
			}
			td{
				border: 1px solid  red;
				background-color: black;
				border-radius: 100px;
			}
		</style>
	</head>
	<body>
		<!--<table border="1" cellspacing="0" cellpadding="0" id="tab" >
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
			<tr><td></td><td></td><td></td></tr>
		</table>-->
		
		<script type="text/javascript">
			var num=1;//默认过关等级
			window.onload=function(){
				creattable();//页面加载完成后就开始执行该函数
			}
			
			function yanzheng(){//判断是否过关函数
				var gg=true;//默认过关
				var tds=document.getElementsByTagName("td");
				for (var i = 0; i < tds.length; i++) {
					//没有过关
					if(tds[i].style.backgroundColor=="black"||tds[i].style.backgroundColor==""){
						gg=false;
						break;
					}
					//过关啦
					else{
						gg=true;
					}
				}
				if(gg){
					alert("恭喜过"+num+"关！");
					num++;
					creattable();
				}	
			}

			function creattable(){
				var tab=document.createElement("table");
				tab.id="tab";
				document.body.innerHTML="";
				document.body.appendChild(tab);
				for (var i = 0; i < num; i++) {
					var tr=document.createElement("tr");
					tab.appendChild(tr);
					for (var j = 0; j < num; j++) {
						var td=document.createElement("td");
						td.onclick=td_onclick;
						tr.appendChild(td);
					}
				}
			}
			
			function td_onclick(){
				var danhang=this.parentNode.rowIndex;//点击某个单元格所在行的索引
				var danlie=this.cellIndex;//点击某个单元格所在列的索引
				var tables=document.getElementById("tab");
//				var thang=tables.rows.length;
				for (var j = 0; j<tables.rows.length; j++) {//表格的某一行
					for (var k = 0; k < tables.rows[j].cells.length;k++) {//所在行的那 一列
						if(j==danhang||k==danlie){
							var cell=tables.rows[j].cells[k];
							if(cell.style.backgroundColor==""||cell.style.backgroundColor=="black"){
								cell.style.backgroundColor="white";
							}
							else{
								cell.style.backgroundColor="black";
							}
						}
					}
				}
				yanzheng();
			}
		</script>
		
	</body>
</html>
